<template>
  <view class="common-search-select-claim min-h-400rpx">
    <view class="h-76rpx flex items-center bg-#fcf8e9 px-20rpx">
      <up-icon size="36rpx" :name="Search3" />
      <text class="ml-4rpx text-26rpx color-#f57100">
        法定福利、奖金补贴等请在企业主页中详细查看
      </text>
    </view>
    <view class="max-h-800rpx overflow-y-auto px-30rpx py-32rpx">
      <view v-for="(item, index) in list" :key="index" class="mb-30rpx">
        <view class="title mb-24rpx text-28rpx color-#121212 leading-40rpx">
          {{ item.title }}
        </view>
        <view v-if="item.type === '1' && item.activeIndex === 0" class="slider mt-[-20rpx] pb-30rpx">
          <up-slider
            v-model:rangeValue="rangeValue"
            :min="1"
            :max="360"
            is-range
            show-value
          />
          <!-- <view class="bar flex items-center">
            <view class="bar-auto flex items-center">
              <view class="start" />
              <view class="end" />
            </view>
          </view> -->
        </view>
        <view class="flex flex-wrap gap-x-24rpx gap-y-24rpx">
          <view
            v-for="(cItem, cIndex) in item.list"
            :key="cIndex"
            class="selectItem w-184rpx rounded-full bg-#f9f9f9 text-center color-#1d2129 leading-58rpx"
            :class="{ active: item.activeIndex === cIndex }"
            @tap="item.activeIndex = cIndex"
          >
            {{ cItem.name }}
          </view>
        </view>
      </view>
    </view>
    <view
      class="flex items-center justify-between gap-x-24rpx px-30rpx pb-40rpx pt-10rpx"
    >
      <up-button
        :custom-style="{
          background: '#f3f4fa',
          color: '#1D2129',
          height: '88rpx',
          fontSize: '28rpx',
        }"
        shape="circle"
        text="清空"
      />
      <up-button
        :custom-style="{
          background: '#1f50f2',
          color: '#fff',
          height: '88rpx',
          fontSize: '28rpx',
        }"
        shape="circle"
        text="确定"
        @click="getSerch"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
// import Search3 from '@/static/images/common/search-3.png';
  const Search3 = 'https://yiliao.test03.qcw800.com/static/images/common/search-3.png'

const rangeValue = ref([1, 360]);

const list = ref([
  {
    title: '薪资待遇',
    type: '1',
    activeIndex: 0,
    list: [{
      name: '全部'
    }],
  },
  {
    title: '学历要求',
    type: '2',
    activeIndex: 0,
    list: [
      {
        name: '全部',
        id: ''
      }
    ],
  },
  {
    title: '企业类型',
    type: '3',
    activeIndex: 0,
    list: [{
      name: '全部',
      id: ''
    }],
  },
]);
const emit = defineEmits(['getSearchList']);
const getSerch = () => {
  let params = {
    money: list.value[0].list[list.value[0].activeIndex],
    education: list.value[1].list[list.value[1].activeIndex],
    company_type: list.value[2].list[list.value[2].activeIndex],
    type: 'gangWei'
  }
  if(params.money === '全部') {
    params.value = rangeValue.value[0] + '-' + rangeValue.value[1]
  }
  emit('getSearchList', params)
}

onMounted(() => {
  let store = JSON.parse(uni.getStorageSync('config')).configCli
  store.config_company_type$$企业类型.map(v => {
    list.value[2].list.push({
      name: v.value,
      id: v.key
    })
  })
  store.config_qualification$$学历配置.map(v => {
    list.value[1].list.push({
      name: v.value,
      id: v.key
    })
  })
  store.config_salary$$薪资配置.map((item,index) => {
    if(index >= (store.config_salary$$薪资配置.length - 1)) {
      list.value[0].list.push({
        name: item.value+'+',
        value: item.value
      })
    }else {
      if (index === 0) {
        list.value[0].list.push({
          name: item.value + '以下'
        })
        list.value[0].list.push({
          name: item.value+'-'+store.config_salary$$薪资配置[index + 1].value,
          value: item.value+'-'+store.config_salary$$薪资配置[index + 1].value
        })
      }else {
        list.value[0].list.push({
          name: item.value+'-'+store.config_salary$$薪资配置[index + 1].value,
          value: item.value+'-'+store.config_salary$$薪资配置[index + 1].value
        })
      }
    }
    if(index === store.config_salary$$薪资配置.length - 1) {
      rangeValue.value[1] = item.value
    }
  })
});
</script>

<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared',
  },
};
</script>

<style scoped lang="scss">
.selectItem {
  &.active {
    @apply bg-#e8edfe color-#1f50f2;
  }
}

/* @mixin bar-ball {
  @apply w-[42rpx] h-[42rpx] rounded-[50%] border-[3rpx] border-solid border-[#1d2129] bg-#fff;
}
.bar {
  @apply w-[602rpx] h-[6rpx] rounded-[4rpx] bg-#ebebeb mx-auto mb-30rpx;
  .start,
  .end {
    @include bar-ball;
  }
} */
.common-search-select-claim {
  ::v-deep(.u-slider) {
    .u-slider__show-range-value::after {
      content: "k";
    }
  }
}
</style>
